<template>
  <div class="mine-content c-w100 c-minh360 c-bg-sgray" v-on:click.capture="stopClick($event)" >
    <!--游客模式提示-->
    <div v-if="isVisitor == 1 && isWeixin" :class="colorName" id="visitorTip" class="c-ph24 c-flex-row c-justify-sb c-aligni-center c-pv16 c-bg-lblue" @click="stopClick($event)">
      <span class="c-fc-white c-fs22">当前为游客模式，登录享受更多精彩服务</span>
      <div class="c-ph18 c-pv4 c-fs22 c-fc-lblue c-bg-white c-br24">立即登录</div>
    </div>
    <div class="c-pv30 c-ph24 bgImg c-bg-sgray"  :class="postShow?'c-text-hidden c-h100vh':'c-minh100vh'">
      <div v-for="(item) in auditList" :key="item.id" class="c-ph24 c-pv20 c-br20 c-bg-white c-mb24">
        <div class="c-flex-row c-mb20">
          <div class="c-ww160 c-hh160 c-br10 c-flex-shrink0">
            <img class="c-w100 c-h c-object-fit-fill c-br10" :src="item.cover" />
          </div>
          <div class="c-ml20 c-flex-column c-justify-sb">
            <div class="c-text-ellipsis2 c-lh38 c-p">
              <span :class="item.status == 3 ? 'c-bg-ccc' : 'c-bg-lblue'" class="c-flex-row c-aligni-center c-justify-center c-fc-white c-fs16 c-br4 c-fw-b c-ww60 c-hh24 c-pa c-p-t5">{{ statusArray[item.status] }}</span>
              <p class="c-fc-xblack c-fs26 c-fw-b c-text-indent70">{{ item.name }}</p>
            </div>
            <div class="c-flex-column c-justify-sb">
              <div class="c-fc-gray c-fs22 c-lh32 c-mb10">开始：{{ item.beginAt }}</div>
              <div class="c-fc-gray c-fs22 c-lh32">结束：{{ item.endAt }}</div>
            </div>

          </div>
        </div>
        <div class="c-flex-row c-justify-sb c-pt20 c-bd-t1-F0F0F0">
          <div  :class="item.status == 3 ?'vis-hidden-important':''" class="c-flex-row c-aligni-center c-fs20" @click="lookPoster(item.id)">
            <i class="iconfont icon-tupian5  c-fs24 c-mr8 c-fc-gray"></i>
            <span class="c-fs24 c-fc-sblack">邀请海报</span>
          </div>
          <div  :class="item.status == 3 ?'vis-hidden-important':''" class="c-flex-row c-aligni-center c-fs20" @click="lookActivity(item.id)">
            <i class="iconfont  icon-huodongxianxing c-fs24 c-mr8 c-fc-gray"></i>
            <span class="c-fs24 c-fc-sblack">查看活动</span>
          </div>
          <div class="c-flex-row c-aligni-center c-fs20" @click="lookData(item.id)">
            <i class="iconfont icon-tongji c-fs24 c-mr8 c-fc-gray"></i>
            <span class="c-fs24 c-fc-sblack">查看数据</span>
          </div>
        </div>
      </div>
      <div class="c-flex-column c-flex-center c-justify-center c-pv32" v-if="loadStatus == 'NO_DATA'">
        <img class="c-ww250" src="https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/fashou/empty.png"/>
        <span class="c-fs24 c-fc-gray c-lh34" >暂无数据</span>
      </div>
      <div class="c-pt20 c-textAlign-c c-fc-gray c-fs24" v-if="loadStatus != 'NO_DATA'">{{loadStatus == 'LOADING' ? '加载中...' : '我是有底线的'}}</div>
    </div>
    <PosterCom v-if="postShow" :postData="postData" @colse="colsePoster"></PosterCom>
    <bottom-menu v-if="isFaShou && isList==0" :itemIndex="0"></bottom-menu>
  </div>

</template>
<script>
import { utilJs } from "@/utils/common.js";
import bottomMenu from "@/components/templates/fashou/bottomMenu.vue";
import PosterCom from "@/components/templates/fashou/posterCom.vue";
export default {
  components:{
    PosterCom,
    bottomMenu
  },

  props:{},

  data() {
    return {
      statusArray:{
        1: "未开始",
        2: "进行中",
        3: "已结束",
      },
      postShow:false,
      postData:null,
      loadStatus:'LOAD_MORE',
      auditList:[],
      colorName: localStorage.getItem("colorName"),
      isVisitor: localStorage.getItem("isVisitor") || 0, //1是游客
      isWeixin: false, // 是否是微信浏览器
      isFaShou: localStorage.getItem("isFaShou") == 1,
      isList: 0, // 是扫码进来--只显示列表页，不显示底部导航
    }
  },
  activated() {
    setDocumentTitle('发售邀约列表');
    this._isCompanyExpired = 0;
    this._page = 1;
    this.isList = this.$route.query.isList || 0;
    this.getList();
    this.wechatShare();
    window.addEventListener('scroll', this.windowScrollFunction);
    this.isWeixin = utilJs.isWeiXin();
    setTimeout(() => {
      this.isFaShou = localStorage.getItem("isFaShou") == 1;
    }, 1000)
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  },

  methods:{
    stopClick(event) {
      if (localStorage.getItem("isVisitor") && localStorage.getItem("isVisitor") == 1 && window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger' && window.navigator.userAgent.toLowerCase().match(/wxwork/i) != "wxwork" && localStorage.getItem("wxAppEnvironment") != 'wxwork') {
        let e = event || window.event;
        if (e.stopPropagation) {
          e.stopPropagation();
        } else {
          e.cancelBubble = true;
        }
        // 将本页面链接存起来作为跳转路径
        this.$routerGo(this, "push",
          { path: '/homePage/login/wechatAuthPage',
            query: {
              refereeId: this.$route.query.refereeId,
              prodId: this.$route.query.prodId,
              prodType: this.$route.query.prodType,
              beforePath:  this.$route.path
            }
          }
        );
      }
    },

    colsePoster() {
      this.postShow = false;
      this.$loading.hide();
    },
    checkAuth() {
      if (!localStorage.getItem('token')) {
        return false;
      }
      return true;
    },
    goAuth() {
      localStorage.setItem("beforeLoginUrl", this.$route.fullPath)
      this.$routerGo(this, "push", { path: '/homePage/login/wechatAuthPage', query: { refereeId: this.$route.query.refereeId } });
    },
    asyncIsExpired () {
      return new Promise((resolve) => {
        utilJs.getMethod(`${global.apiurl}fashou/getFaShouExpireTime`, res => {
          this._isCompanyExpired = res.expireStatus
          resolve(this._isCompanyExpired);
        });
      })
    },

    checkExpired() {
      return new Promise((resolve) => {
        this.asyncIsExpired().then(() => {
          if (this._isCompanyExpired == 0) {
            this.$cjConfirm({
              title: '提示',
              message: '该活动已被下架',
              showCancelButton:false,
              confirmButtonText:'我知道了！',
              onConfirm:() => {
                this.$routerGo(this, "replace", { path: `/fashou/activity` });
              },
            })
            return resolve(false);
          } else {
            return resolve(true);
          }
        })
      })
    },
    getList() {
      if (this.loadStatus == 'LAODING') {
        return;
      }
      this.loadStatus = 'LAODING';
      utilJs.getMethod(global.fashouApiUrl + `releaseCloud/list?page=${this._page}&limit=10`, res => {
        let list = res.data;
        this.auditList = this._page == 1 ? list : [...this.auditList, ...list];
        if (!this.auditList.length) {
          this.loadStatus = 'NO_DATA';
          return;
        }
        if (list.length < 10) {
          this.loadStatus = 'NO_MORE_DATA';
          return;
        }
        this._page++;
        this.loadStatus = 'LOAD_MORE';
      });
    },
    getInviteShow (id) {
       utilJs.getMethod(global.fashouApiUrl + `releaseCloud/inviteShow?id=${id}`, res => {
        this.postData = res;
        // 延长300毫秒让海报图片加载
        this.$nextTick(() => {
          setTimeout(() => {
              this.postShow = true;
          }, 300)
        })

        this.$loading.hide();
      });
    },
    async lookPoster(id) {
       if (!this.checkAuth()) {
        this.goAuth();
        return;
      }
      await this.checkExpired();
      if (this._isCompanyExpired == 1) {
        this.$loading.hide();
        this.$loading.show();
        this.getInviteShow(id);
      }

    },
    lookActivity(id) {
       if (!this.checkAuth()) {
        this.goAuth();
        return;
      }
      this.checkExpired().then(res => {
        if (!res) {
          return
        } else {
          this.$routerGo(this, "push", { path: `/fashou/detail?id=${id}` });
        }
      })

    },
    lookData(id) {
      if (!this.checkAuth()) {
        this.goAuth();
        return;
      }
      this.$routerGo(this, "push", { path: `/fashou/dataDetail?id=${id}` });
    },
     wechatShare() {
      let title = '发售云活动列表';
      let desc = '点击查看';
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}`;
      let imgUrl = 'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/14_material_admin/image/public/images/fashou/shareBg.png';
      utilJs.wechatConfig(shareUrl, title, imgUrl, desc, function () { });
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.loadStatus == 'LOAD_MORE' && this.auditList.length) {
          this.getList();
        }
      });
    },

  },

}
</script>